import React, { Component } from 'react'
import SizeMe from 'react-sizeme'

const WidthProvider = (ComposedComponent) =>
  class extends Component {
    constructor(props) {
      super(props)
      this.state = {
        width: props.size.width
      }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.size.width !== prevState.width) {
        return {
          width: nextProps.size.width
        }
      }
      return null
    }

    render() {
      return <ComposedComponent {...this.props} {...this.state} />
    }
  }

export default (ComposedComponent) =>
  SizeMe({
    monitorWidth: true
  })(WidthProvider(ComposedComponent))
